<template>
  <div :style="pageHeighStyle">
    <div
      class="RegistrationCenter_meng"
      :style="windowHeights"
      v-if="TabwindowHeights==0"
      @click="quxiao"
    ></div>
    <div class="RegistrationCenter_show" v-if="TabwindowHeights==0">
      <div>{{cooperate_name}}</div>
      <div>
        <div>
          <img src="http://www.zhaoshengku.net/wx-%E7%94%B5%E8%AF%9D.png" alt />
          <span>{{cooperate_phone}}</span>
        </div>
        <div>
          <img
            src="http://www.zhaoshengku.net/wx-%E4%BD%8D%E7%BD%AE%20%E6%8B%B7%E8%B4%9D%205.png"
            alt
          />
          <span>{{cooperate_addr}}</span>
        </div>
      </div>
      <div>
        <span>备注：</span>
        <span>{{cooperate_remark}}</span>
      </div>
      <div>
        <span>优势：</span>
        <span>{{cooperate_advantage}}</span>
      </div>
    </div>
    <div class="none_div" v-if="!listisshow">暂时没有招生工作者与您合作，请先发布招生项目！</div>
    <div class="RegistrationCenter_die" v-for="(item,index) in list" :key="index" v-if="listisshow">
      <div>
        <img :src="item.article_thumbnail" alt />
        <span>{{item.article_title}}</span>
      </div>
      <div>
        <div>报名用户</div>
        <div v-if="item.techaer">
          <div v-for="(i,n) in item.techaer" :key="n" @click="hh(i)">
            <img
              :src="i.member_info.info_avatar?i.member_info.info_avatar:'http://www.zhaoshengku.net/wx-%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%206.png'"
              alt
            />
            <div>{{i.cooperate_name}}</div>
          </div>
        </div>
        <div class="none_div" v-else style="width:100%;">您的项目暂时未有人合作！</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      windowHeights: "",
      pageHeighStyle: "",
      TabwindowHeights: 1,
      pagenum: 1,
      list: [],
      listisshow: false,
      cooperate_name: "",
      cooperate_phone: "",
      cooperate_remark: "",
      cooperate_addr: "",
      cooperate_advantage: ""
    };
  },
  onReachBottom() {
    if (this.list.length < 10) {
      return;
    } else {
      wx.showToast({
        title: "",
        icon: "loading",
        duration: 1000,
        mask: true
      });
      this.pagenum += 1;
      wx.request({
        url: "https://api.zhaoshengku.net/index/member/getmycooperate",
        method: "post",
        data: {
          pagenum: this.pagenum,
          pagesize: 10
        },
        header: {
          Authorization: this.headerCode
          //  "X-Requested-With": "xmlhttprequest"
        },
        success: res => {
          if (res.data.code == 200) {
            if (res.data.data.data.length == 0) {
              wx.hideToast();
              wx.showToast({
                title: "暂时没有更多内容！",
                icon: "none",
                duration: 1000,
                mask: true
              });
            } else {
              this.list = this.list.concat(res.data.data.data);
              wx.hideToast();
            }
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    }
  },
  methods: {
    hh(e) {
      this.TabwindowHeights = 0;
      this.pageHeighStyle = this.windowHeights + ";overflow:hidden";
      this.cooperate_name = e.cooperate_name;
      this.cooperate_phone = e.cooperate_phone;
      this.cooperate_remark = e.cooperate_remark;
      this.cooperate_addr = e.cooperate_addr;
      this.cooperate_advantage = e.cooperate_advantage;
    },
    quxiao() {
      this.TabwindowHeights = 1;
      this.pageHeighStyle = "";
    },
    onShows() {
      wx.getSystemInfo({
        success: res => {
          this.windowHeights = "height:" + res.windowHeight * 2 + "rpx";
        }
      });
      // 设置头
      wx.setNavigationBarTitle({
        title: "合作中心"
      });
      // 获取token
      wx.getStorage({
        key: "koken",
        success: res => {
          this.headerCode = "Bearer " + res.data;
          // 获取合作列表
          wx.request({
            url: "https://api.zhaoshengku.net/index/member/getmycooperate",
            method: "post",
            data: {
              pagenum: this.pagenum,
              pagesize: 10
            },
            header: {
              Authorization: this.headerCode
              //  "X-Requested-With": "xmlhttprequest"
            },
            success: res => {
              if (res.data.code == 200) {
                wx.stopPullDownRefresh();
                if (res.data.data.data.length == 0) {
                  this.listisshow = false;
                } else {
                  this.listisshow = true;
                  this.list = res.data.data.data;
                }
              }
            },
            fail: res => {
              console.log(res);
              if (res.errMsg) {
                wx.showToast({
                  title: "请检查网络连接！",
                  icon: "none",
                  duration: 1500
                });
              }
            }
          });
        }
      });
    }
  },
  onShow() {
    this.onShows();
  },
  onPullDownRefresh() {
    this.onShows();
  }
};
</script>

<style scoped>
.none_div {
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  font-size: 26rpx;
  color: #666;
}
.RegistrationCenter_meng {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  left: 0;
  top: 0;
}
.RegistrationCenter_show {
  padding: 78rpx 62rpx;
  background: #fff;
  width: 588rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  position: absolute;
  left: 81rpx;
  top: 30rpx;
}
.RegistrationCenter_show > div:nth-child(1) {
  width: 100%;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  padding-bottom: 37rpx;
  border-bottom: 1rpx solid #dddddd;
}
.RegistrationCenter_show > div:nth-child(2) {
  padding-top: 53rpx;
  padding-bottom: 28rpx;
  border-bottom: 1rpx solid #dddddd;
}
.RegistrationCenter_show > div:nth-child(2) > div {
  display: flex;
}
.RegistrationCenter_show > div:nth-child(2) > div img {
  width: 30rpx;
  height: 30rpx;
  margin-right: 18rpx;
}
.RegistrationCenter_show > div:nth-child(2) > div span {
  display: inline-block;
  width: 382rpx;
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
.RegistrationCenter_show > div:nth-child(3) {
  border-bottom: 1rpx solid #dddddd;
}
.RegistrationCenter_show > div:nth-child(3),
.RegistrationCenter_show > div:nth-child(4) {
  display: flex;
  padding: 30rpx 0;
}
.RegistrationCenter_show > div:nth-child(3) > span:nth-child(1),
.RegistrationCenter_show > div:nth-child(4) > span:nth-child(1) {
  font-size: 28rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
  display: inline-block;
  width: 90rpx;
}
.RegistrationCenter_show > div:nth-child(3) > span:nth-child(2),
.RegistrationCenter_show > div:nth-child(4) > span:nth-child(2) {
  flex: 1;
}
.RegistrationCenter_show > div:nth-child(3) > span:nth-child(2),
.RegistrationCenter_show > div:nth-child(4) > span:nth-child(2) {
  font-size: 24rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
}
.RegistrationCenter_show > div:nth-child(2) > div:nth-child(2) {
  margin-top: 47rpx;
}
.RegistrationCenter_show > div:nth-child(2) > div:nth-child(2) img {
  width: 24rpx;
  height: 35rpx;
}
.RegistrationCenter_show > div:nth-child(2) > div:nth-child(1) {
  align-items: center;
}
.RegistrationCenter_show > div:nth-child(5) {
  width: 188rpx;
  height: 47rpx;
  border: 1rpx solid #000000;
  border-radius: 40rpx;
  text-align: center;
  line-height: 47rpx;
  margin: 0 auto;
  margin-top: 80rpx;
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  margin-bottom: 80rpx;
}
.RegistrationCenter_die {
  background: #eeeeee;
  padding-top: 20rpx;
}
.RegistrationCenter_die > div:nth-child(1) {
  background: #fff;
  padding-left: 74rpx;
  padding-right: 143rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 219rpx;
  margin-bottom: 10rpx;
}
.RegistrationCenter_die > div:nth-child(1) img {
  width: 177rpx;
  height: 177rpx;
  border-radius: 50%;
}
.RegistrationCenter_die > div:nth-child(1) span {
  display: inline-block;
  width: 305rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  line-height: 40rpx;
}
.RegistrationCenter_die > div:nth-child(2) {
  padding: 0 33rpx 33rpx 33rpx;
  background: #fff;
}
.RegistrationCenter_die > div:nth-child(2) > div:nth-child(1) {
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  width: 100%;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #dddddd;
}
.RegistrationCenter_die > div:nth-child(2) > div:nth-child(2) {
  margin-top: 40rpx;
  display: flex;
  flex-wrap: wrap;
}
.RegistrationCenter_die > div:nth-child(2) > div:nth-child(2) > div {
  width: 157rpx;
  text-align: center;
  margin-bottom: 84rpx;
  margin-left: 55rpx;
}
.RegistrationCenter_die > div:nth-child(2) > div:nth-child(2) > div > img {
  width: 157rpx;
  height: 157rpx;
  margin-bottom: 12rpx;
  border-radius: 50%;
}
.RegistrationCenter_die > div:nth-child(2) > div:nth-child(2) > div > div {
  font-size: 26rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
  width: 100%;
  text-align: center;
}
.RegistrationCenter_die > div:nth-child(2) > .none_div {
  width: 200rpx;
  display: flex;
  justify-content: space-around;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
}
</style>
